<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="add">+</button>
  </div>
</template>
<!-- 
    一、pinia的配置步骤
    1、在终端中执行yarn add pinia
    2、在src/store目录下创建入口文件index.ts，编写代码如下
        //从pinia依赖包中导入createPinia
        import {createPinia} from 'pinia'
        //调用createPinia来创建pinia对象
        const pinia=createPinia()
        //使用ES6默认导出的方式将其导出
        export default pinia
    3、在main.ts入口文件中将pinia对象设置到app,关键代码如下
        import pinia from './store'
        const app=createApp(App)
        app.use(pinia)
    二、编写pinia核心
    三、组件中调用store
    1、导入:
 -->
<script lang='ts' setup>
import useCounterStore from '@/store/useCounterStore'
import {storeToRefs} from 'pinia'
const store=useCounterStore()
//如果要将state的变量直接从store中解构，那么响应式就丢了，必须使用storeToRefs来变成响应式
const {count}=storeToRefs(store)
const {incrementSync}=store
const add=()=>{
    incrementSync(2)
}

</script>

<style lang='scss' scoped>
</style>